<template>
  <div class="pic">
    <tableComponents :pagination="{ currentPage, pageSize: pagesize, total: pic_list.all_num }" @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange" @sendUserSearch="receive_search" :searchData="userSearchData" :isHaveExport="false" @toAdd="up_btn"
        addText="上传图片">
      <template v-slot:table>
        <el-table ref="multipleTable" :data="pic_list.data" v-loading="loading" stripe header-row-class-name="head_color" tooltip-effect="dark"
            style="width: 99.8%">
          <el-table-column label="图片" min-width="100">
            <template slot-scope="scope">
              <div class="pic_list_img" style="width:150px;height:150px;">
                <el-image style="width:100%" :src="$fnc.getImgUrl(scope.row.image)"></el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="图片名称" min-width="250">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <span>{{ scope.row.title || "----" }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="所属分类" min-width="200">
            <template slot-scope="scope">
              <div class="tab_div">
                <div>
                  <el-select v-model="scope.row.cate_id" style="width:100px" size="mini" @change="pic_change_cate(scope.row)" placeholder="请选择">
                    <el-option v-for="item in cate_list.data" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                  <span>{{ get_catetitle(scope.row.cate_id) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" min-width="200">
            <template slot-scope="scope">{{
              scope.row.created_time | getTimeFormat
            }}</template>
          </el-table-column>
          <el-table-column label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" @click="del_list_detail(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <uploadpic :show="up_show" v-show="up_show" ref="uploadpic" :is_more="true" @send_pic="get_pic" @closedia="closeDDD"></uploadpic>
  </div>
</template>
<script>
import { picSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import uploadpic from "@/components/page/pic/up_pic";
export default {
  name: "pic_must",
  data () {
    return {
      userSearchData: picSearchData,
      cate_list: {
        data: [],
        sum_number: 0
      },
      up_show: false,
      serarch_from: {},
      is_search: false,
      loading: false,
      pic_list: {},
      currentPage: 1, //初始页
      pagesize: 10 //    每页的数据
    };
  },

  components: {
    uploadpic
  },
  created () {
    this.get_cate();
  },
  mounted () {
    this.get_pic_list(1);
  },
  methods: {
    closeDDD () {
      this.up_show = false
    },
    get_pic (pic) {
      this.up_show = false;
    },
    pic_change_cate (item) {
      var params = {};
      params.cate_id = item.cate_id;
      params.id_str = item.id;

      this.$api.getPage.pic_move(params).then(res => {
        if (res.data.code == 200) {
          this.$fnc.alertSuccess({ text: "修改成功" });
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    get_catetitle (id) {
      this.$nextTick(() => {
        var arr = this.cate_list.data;
        arr.forEach(item => {
          if (item.id == id) {
            return item.title;
          }
        });
      });
    },
    up_btn () {
      console.log('tpuppppp')
      this.$refs.uploadpic.get_cate();
      this.up_show = true;
    },
    del_list_detail (item) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id_str: item.id };
          this.$api.getPage.pic_del_list(data).then(res => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这些信息。", "success");
              this.get_pic_list();
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
              this.get_pic_list();
            }
          });
        }
      });
    },
    receive_search (val) {
      this.is_search = true;
      this.serarch_from = val;
      this.search_pic_list(1);
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      //每页下拉显示数据
      this.pagesize = size;
      this.get_pic_list(1);
    },
    handleCurrentChange: function (currentPage) {
      //点击第几页
      this.currentPage = parseInt(currentPage);
      if (this.is_search) {
        //是搜索
        this.search_pic_list(this.currentPage);
      } else {
        //不是搜索
        this.get_pic_list(this.currentPage);
      }
    },
    search_pic_list (page) {
      this.loading = true;
      var params = {};
      params = this.serarch_from;
      params.page = page;
      params.page_size = this.pagesize;
      this.$api.getPage.pic_get_list(params).then(res => {
        if (res.data.code == 200) {
          this.pic_list = res.data.result;

          this.loading = false;
        } else {
          this.$fnc.alerterror(res.data.result);
          this.loading = false;
        }
      });
    },
    get_cate () {
      //获取分类
      this.$api.getPage.pic_get_cate({}).then(res => {
        if (res.data.code == 200) {
          this.cate_list = res.data.result;
          // console.log('分类',this.cate_list)
          // Jimmy 更新
          this.$store.commit('setPicTypeList', this.cate_list.data)
        } else {
          this.$fnc.alertError(res.data.result);
        }
      });
    },
    get_pic_list (page) {
      this.loading = true;
      var params = {};

      params.page = page;
      params.page_size = this.pagesize;
      this.$api.getPage.pic_get_list(params).then(res => {
        if (res.data.code == 200) {
          this.pic_list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alerterror(res.data.result);
          this.loading = false;
        }
      });
    }
  }
};
</script>
<style scoped>
.pic_list_img {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 2px solid #eeeeee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pic_list_img img {
  width: 100%;
  max-height: 150px;
}
</style>
